<template>
  <div class="box">
    <div class="left">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="车位名：">
          <el-input
            style="width: 100%"
            v-model="formLabelAlign.parkname"
            placeholder="请输入车位名"
          ></el-input>
        </el-form-item>
        <el-form-item label="车位金额：">
          <el-input
            v-model="formLabelAlign.parkpay"
            placeholder="请输入车金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="车位类型">
          <el-select
            style="width: 100%"
            v-model="formLabelAlign.parktype"
            placeholder="请选择车位类型"
          >
            <el-option label="地下" :value="1"></el-option>
            <el-option label="地上" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车位状态：">
          <el-select
            style="width: 100%"
            v-model="formLabelAlign.parkstatus"
            placeholder="请选择车位状态"
          >
            <el-option label="已有车" :value="1"></el-option>
            <el-option label="未有车" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item>
          <div class="btn">
            <el-button
              style="width: 40%"
              type="primary"
              icon="el-icon-search"
              @click="search"
              >查询</el-button
            >
            <el-button
              style="width: 40%"
              type="primary"
              icon="el-icon-edit"
              @click="reset"
              >重置</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <div class="top">
        <h3>车位列表</h3>
        <el-button
          type="success"
          style="width: 140px"
          icon="el-icon-plus"
          @click="open2"
          >新增</el-button
        >
      </div>
      <template>
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          border
          stripe
        >
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="parkname"
            label="车位名称"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="parkpay"
            label="车位金额"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column prop="parktype" label="车位类型" align="center">
            <template slot-scope="scope">
              <el-tooltip
                :content="'Switch value: ' + scope.row.parktype"
                placement="top"
              >
                <el-switch
                  @change="open3($event, scope.row)"
                  v-model="scope.row.parktype"
                  :active-value="1"
                  :inactive-value="2"
                  active-text="地下"
                  inactive-text="地上"
                >
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column min-width="100px" label="车位状态" align="center">
            <template slot-scope="scope">
              <el-tooltip
                :content="'Switch value: ' + scope.row.parkstatus"
                placement="top"
              >
                <el-switch
                  @change="open4($event, scope.row)"
                  v-model="scope.row.parkstatus"
                  :active-value="1"
                  :inactive-value="2"
                  active-text="已有车"
                  inactive-text="未有车"
                >
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            min-width="150px"
            prop="address"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                plain
                icon="el-icon-share"
                @click="open5(scope.$index, scope.row)"
                :disabled="scope.row.parkstatus == 1"
                >分配车位</el-button
              >
              <el-button
                type="primary"
                plain
                icon="el-icon-edit"
                @click="open(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                @click="del(scope.$index, scope.row)"
                >移除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pages">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 9, 20, 30]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </template>
    </div>

    <!-- ================================================ -->
    <div>
      <el-dialog title="车位修改" :visible.sync="dialogFormVisible">
        <el-form
          :model="form"
          :label-position="labelPosition2"
          label-width="80px"
          style="margin-left: 40px"
          ref="form"
          :rules="rules"
        >
          <el-form-item
            style="width: 100%"
            label="车位名称"
            :label-width="formLabelWidth"
            prop="parkname"
          >
            <el-input v-model="form.parkname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="车位金额"
            :label-width="formLabelWidth"
            style="width: 100%"
            prop="parkpay"
          >
            <el-input v-model="form.parkpay" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="车位类型"
            :label-width="formLabelWidth"
            prop="parktype"
          >
            <el-select
              clearable
              v-model="form.parktype"
              placeholder="请选择活动区域"
              style="width: 100%"
            >
              <el-option label="地下" :value="1"></el-option>
              <el-option label="地上" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="车位状态"
            :label-width="formLabelWidth"
            prop="parkstatus"
          >
            <el-select
              clearable
              v-model="form.parkstatus"
              placeholder="请选择活动区域"
              style="width: 100%"
            >
              <el-option label="已有车" :value="1"></el-option>
              <el-option label="未有车" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >取 消</el-button
          >
          <el-button v-if="flag" type="primary" @click="save('form')"
            >保 存</el-button
          >
          <el-button v-if="!flag" type="primary" @click="add('form')"
            >提 交</el-button
          >
          <el-button type="primary" @click="rese">重 置</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- =============================== -->
    <el-drawer
      title="车位分配"
      :visible.sync="table"
      direction="ltr"
      size="50%"
    >
      <br />
      <el-table
        border
        ref="multipleTable"
        :data="gridData"
        style="width: 90%; margin: 0 auto"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="用户账号"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="homeaddress"
          label="家庭住址"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="type" label="类型" align="center">
        </el-table-column>
        <el-table-column prop="parkname" label="车位" align="center">
        </el-table-column>
      </el-table>
      <div class="leftpage">
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="currentPage2"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pagesize2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2"
        >
        </el-pagination>
      </div>
      <div class="bths">
        <el-button type="primary" @click="no" style="width: 30%"
          >取消</el-button
        >
        <el-button type="primary" @click="yes" style="width: 30%"
          >确定</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRows: [],
      table: false,
      flag: true,
      givecar: {},
      yescar: {},
      currentPage: 1,
      currentPage2: 1,
      pagesize: 9,
      pagesize2: 10,
      total2: 0,
      total: 0,
      formLabelWidth: "80px",
      dialogFormVisible: false,
      form: {
        region: "",
      },
      gridData: [],
      loading: false,

      labelPosition: "top",
      labelPosition2: "left",
      formLabelAlign: {},
      formLabelAlign2: {},
      tableData: [],
      multipleSelection: [],
      rules: {
        parkname: [
          { required: true, message: "车位名称不能为空", trigger: "blur" },
        ],
        parkpay: [
          { required: true, message: "车位金额不能为空", trigger: "blur" },
        ],
        parktype: [
          { required: true, message: "车位类型不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.leftData();
  },
  methods: {
    // 重置
    rese() {
      this.form = {};
    },
    // 处理选中行变化事件
    handleSelectionChange(selection) {
      this.yescar = selection;
      // this.yescar = JSON.parse(JSON.stringify(selection.id));
      // console.log(selection)
      if (selection.length > 1) {
        //   // 如果选中了多行，则只保留最新选中的行
        this.$refs.multipleTable.clearSelection(); // 清除所有选中状态
        this.$refs.multipleTable.toggleRowSelection(
          selection[selection.length - 1],
          true
        ); // 选中最新的一行
      } else {
        this.selectedRows = selection; // 更新选中的行
      }
    }, // 处理行点击事件
    handleRowClick(row) {
      console.log(row);
      this.$refs.multipleTable.clearSelection(); // 清除所有选中状态
      this.$refs.multipleTable.toggleRowSelection(row, true); // 选中当前行
    },
    // 数据获取
    async getList() {
      this.loading = true;
      await this.$axios
        .get("/parking/getParkData", {
          params: {
            parkname: "",
            parkpay: "",
            parktype: "",
            parkstatus: "",
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
          },
        })
        .then((res) => {
          this.loading = false;
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    // 侧边抽屉
    async leftData() {
      await this.$axios
        .get("/users/getUsersData", {
          params: {
            currPage: this.currentPage2 - 1,
            pageNum: this.pagesize2,
          },
        })
        .then((res) => {
          console.log(res);
          this.gridData = res.data.data;
          this.total2 = res.data.total;
        });
    },
    // 抽屉分页器
    handleSizeChange2(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize2 = val;
      this.leftData();
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage2 = val;
      this.leftData();
    },
    open(index, res) {
      this.flag = true;
      this.dialogFormVisible = true;
      this.form = res;
      console.log(res);
    },
    open2() {
      this.dialogFormVisible = true;
      this.flag = false;
      this.form = {};
    },
    // 编辑
    save(formName) {
      this.flag = true;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.$axios
            .post("/parking/editParkData", {
              u_id: this.form.id,
              parkname: this.form.parkname,
              parkpay: this.form.parkpay,
              parktype: this.form.parktype,
              parkstatus: this.form.parkstatus,
              token: sessionStorage.getItem("token"),
            })
            .then((res) => {
              this.dialogFormVisible = false;
              this.getList();
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.form = {};
            });
        }
      });
    },
    // 新增
    add(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.$axios
            .post("/parking/addParkData", {
              parkname: this.form.parkname,
              parkpay: this.form.parkpay,
              parktype: this.form.parktype,
              parkstatus: this.form.parkstatus,
              token: sessionStorage.getItem("token"),
            })
            .then((res) => {
              this.dialogFormVisible = false;
              this.getList();
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.form = {};
            });
        }
      });
      this.flag = false;
    },
    // 删除
    del(index, res) {
      this.$confirm("确定删除该车位？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await this.$axios
          .get("/parking/delParkData", {
            params: {
              id: res.id,
              token: sessionStorage.getItem("token"),
            },
          })
          .then((res) => {
            this.$message({
              type: "success",
              message: "删除车位成功!",
            });
            this.getList();
          });
      });
    },
    // 搜索
    async search() {
      //深拷贝
      this.currentPage = 1;
      this.formLabelAlign2 = JSON.parse(JSON.stringify(this.formLabelAlign));
      console.log(this.formLabelAlign2);
      await this.$axios
        .get("/parking/getParkData", {
          params: {
            parkname: this.formLabelAlign2.parkname,
            parkpay: this.formLabelAlign2.parkpay,
            parktype: this.formLabelAlign2.parktype,
            parkstatus: this.formLabelAlign2.parkstatus,
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
          },
        })
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    // 地上地下开关
    open3(res, row) {
      console.log(res, row);
      this.$axios
        .post("/parking/editParkData", {
          u_id: row.id,
          parkname: row.parkname,
          parkpay: row.parkpay,
          parktype: res,
          parkstatus: row.parkstatus,
          token: sessionStorage.getItem("token"),
        })
        .then((res) => {
          console.log(res);
          this.getList();
        });
    },
    // 有无车开关
    async open4(res, row) {
      console.log(res, row);
      await this.$axios
        .post("/parking/editParkData", {
          u_id: row.id,
          parkname: row.parkname,
          parkpay: row.parkpay,
          parktype: row.parktype,
          parkstatus: res,
          token: sessionStorage.getItem("token"),
        })
        .then((res) => {
          console.log(res);
          this.getList();
        });
    },
    // 分配车位
    open5(index, row) {
      this.table = true;
      console.log(index, row);
      this.givecar = row;
    },
    yes() {
      this.$confirm("确定分配该车位?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .post("/users/updateParkStatus", {
            u_id: this.yescar[0].id,
            parkId: this.givecar.id,
            parkname: this.givecar.parkname,
            parkstatus: 1,
            token: sessionStorage.getItem("token"),
          })
          .then((res) => {
            this.$message({
              message: "车位分配成功",
              type: "success",
            });
            this.table = false;
            this.getList();
          });
      });
      this.$axios.post("/parking/editParkData", {
        parkname: this.givecar.parkname,
        parkpay: this.givecar.parkpay,
        parkstatus: 1,
        parktype: this.givecar.parktype,
        token: sessionStorage.getItem("token"),
        u_id: this.givecar.id,
      });
    },
    no() {
      this.table = false;
    },
    // 重置1
    reset() {
      this.formLabelAlign = {};
      this.formLabelAlign2 = "";
      console.log(this.formLabelAlign2);
      this.getList();
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      console.log(val);
      this.pagesize = val;
      if (this.formLabelAlign2) {
        this.search();
      } else {
        this.getList();
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;

      if (this.formLabelAlign2) {
        this.search();
      } else {
        this.getList();
      }
    },
  },
};
</script>

<style  scoped>
.box {
  display: flex;
  justify-content: center;
}
.box > .left {
  width: 300px;
}
.box > .right {
  width: 80%;
  margin-left: 30px;
}
.box > .right > .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.pages {
  display: flex;
  justify-content: right;
  margin-top: 10px;
}
.leftpage {
  display: flex;
  justify-content: right;
  margin-right: 40px;
  margin-top: 20px;
}
.bths {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.btn {
  display: flex;
  justify-content: center;
}
.el-button--primary.is-plain,
.right .el-button--primary {
  background-color: #ffffff00;
}
.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  color: #409eff;
}
.el-button--danger.is-plain,
.el-button--danger {
  background-color: #ffffff00;
}
.el-button--danger.is-plain:focus,
.el-button--danger.is-plain:hover {
  color: #f56c6c;
}
</style>